var direct = ['top', 'right', 'bottom', 'left'];
var far = 50;
var long = 250;
var direction = true;
var anim = true;
var startPos = 0;
var numSlide;
var smallImgWrap;

$(function(){
	$('.left-arr').bind('click', leftscroll);
	$('.right-arr').bind('click', rightscroll);
	var smallImg = $('.small-img figure');
	smallImg .each(function(i, e) {
		$(this).css({left : ($(this).width() + 5) * i});
	});
	smallImgWrap = $('.small-img-wrap');
	smallImgWrap.css({width : 181 * smallImg.length});
	numSlide = parseInt((smallImgWrap.width() / 181) / 5);
})

function ajaxCallBack(e){
	var param = {};
	param[direct[Math.floor(Math.random() * direct.length)]] = far;
	var bigImg = $('#big-img');
	bigImg.children('figure').animate(param, long);
	bigImg.animate({opacity : 0}, long, function(){
		bigImg.html(e);
		bigImg.animate({opacity : 1})
	});
}
function leftscroll(e){
	startPos --;
	if(startPos < 0) startPos = numSlide;
	scrollToFunc(startPos);
	//direction = false;
	/*if(anim){
		scrollfunc(181);
	}*/
}
function rightscroll(e){
	startPos ++;
	if(startPos > numSlide) startPos = 0;
	scrollToFunc(startPos);
	//direction = true;
	/*if(anim){
		scrollfunc(-181);	
	}*/
}
function scrollToFunc(pos){
	smallImgWrap.animate({left : smallImgWrap.offsetParent().width() * -pos}, long);
	console.log(smallImgWrap.offsetParent());
}
function scrollfunc(side){
	anim = false;
	var numEll = $('.small-img figure').length;
	$('.small-img figure').each(function(i, e) {
		var ell = $(this);
		var val = 0;
		if(direction){
			val = parseInt(ell.css('left')) + Number(side);
			ell.animate({left : val}, timeSlide, function(){
				if(parseInt(ell.css('left')) <= -181){
					if(numEll > 5){
						ell.css({left : (ell.width() + parseInt(ell.css('marginRight'))) * (numEll - 1)});
					}else{
						ell.css({left : $('.small-img').width()});
					}
				}
				anim = true;
			})
		}else{
			if(numEll > 5){
				if(parseInt(ell.css('left')) >= (ell.width() + parseInt(ell.css('marginRight'))) * (numEll - 1)){	
					ell.css({left : -(ell.width() + parseInt(ell.css('marginRight')))});
				}
			}else{
				if(parseInt(ell.css('left')) >= $('.small-img').width()){	
					ell.css({left : -(ell.width() + parseInt(ell.css('marginRight')))});
				}
			}
			val = parseInt(ell.css('left')) + Number(side);
			ell.animate({left : val}, timeSlide, function(){				
				anim = true;
			});
		}
	});
}